<template>
    <div class="benefit-kf">
        <van-nav-bar :title="$t('benefit.title_four')" left-arrow fixed @click-left="_return" :z-index="6666"></van-nav-bar>
        <div class="benefit-kf-main">
            <div class="benefit-kf-content">
                <img :src="qrCodeImg" alt="" class="benefit-kf-img">
                <p class="benefit-kf-tip">{{ $t('benefit.remind_three') }}</p>
            </div>
            <!--<div class="benefit-kf-btn">-->
                <!--<van-button @click="handleDownImg">{{ $t('benefit.button_four') }}</van-button>-->
            <!--</div>-->
        </div>
    </div>
</template>

<script>
    export default {
        // props: {
        //     visible: {
        //         type: Boolean,
        //         default: false
        //     }
        // },
        data () {
            return {
                qrCodeImg: ''
            }
        },
        methods: {
            handleDownImg () {
                console.log('下载图片')
            },
            async loadQrCode () {
                this.$api.get('welfare/kfqrcode')
                    .then(res =>{
                        this.qrCodeImg = res.detail.web + res.detail.wx_qrcode
                    })
            },
            _return(){
                this.$emit('_return')
            }
        },
        created () {
            this.loadQrCode()
        }
    }
</script>

<style scoped lang="stylus">

    [class*=van-hairline]::after{
        border: none;
    }
    .benefit-kf {
        padding: 56px 20px;

        &-main {
            padding: 40px 0;
            background:linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%)
            border-radius 5px
            text-align: center;

        }
        &-content {
            margin: 10px auto;
            img{
                width 225px
                height 225px
                display block
                margin 0 auto
            }
        }
        &-tip {
            font-size: 12px;
            color: #D8D8D8;
            margin: 10px 0 0px;
        }
        &-btn {
            .van-button {
                height: 30px;
                line-height: 30px;
                background:linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%);
                color: #1F1F1F;
                border: none;
                padding: 0 25px;
            }
        }
    }
</style>
